<template>
  <div class="Membershipproportion_Main_box_css">
    <div class="Membershipproportion_content_box_css" id="Membershipproportion_content">

    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import axios from 'axios'
    export default {
        name:'Membershipproportion',
        data(){
            return{
                option:{
                        title: {
                            text: '每日用户数',
                            subtext: 'Fake Data'
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['会员', '非会员']
                        },
                        calculable: true,
                        xAxis: [
                            {
                            type: 'category',
                            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                            }
                        ],
                        yAxis: [
                            {
                            type: 'value'
                            }
                        ],
                        series: [
                            {
                            name: '会员',
                            type: 'bar',
                            data: [],
                            markPoint: {
                                data: [
                                { type: 'max', name: 'Max' },
                                { type: 'min', name: 'Min' }
                                ]
                            },
                            markLine: {
                                data: [{ type: 'average', name: 'Avg' }]
                            }
                            },
                            {
                            name: '非会员',
                            type: 'bar',
                            data: [],
                            markPoint: {
                                data: [
                                { name: 'Max', value: 182.2, xAxis: 7, yAxis: 183 },
                                { name: 'Min', value: 2.3, xAxis: 11, yAxis: 3 }
                                ]
                            },
                            markLine: {
                                data: [{ type: 'average', name: 'Avg' }]
                            }
                            }
                        ]
                }
            }
        },
        mounted(){
            var that=this
            axios
            .get('http://127.0.0.1/Membershipproportion')
            .then(function(res){
                for(var i=0;i<7;i++){
                    that.option.series[0].data.push(res.data[i][0])
                    that.option.series[1].data.push(res.data[i][1])
                }
                that.Membershipproportion()
            })
            .catch(function(error){
                console.log(erro)
            })
        },
        methods:{
            Membershipproportion(){
                var chart = echarts.init(document.getElementById("Membershipproportion_content"));
                chart.setOption(this.option)
            }
        }
    }
</script>

<style>
    .Membershipproportion_Main_box_css{
        width:100%;
        height: 100%;
    }
    .Membershipproportion_content_box_css{
        width: 100%;
        height: 100%;
    }
</style>